<script setup>
import {useTabsStore} from '@/stores/tabs.js'
import {useRouter} from 'vue-router'

const tabsStore = useTabsStore()
const router = useRouter()

// 点击标签跳转
const handleClick = (tab) => {
  const path = tab.props.name
  router.push(path)
}

// 移除标签
const handleRemove = (path) => {
  tabsStore.removeTab(path)
}
</script>

<template>
  <div class="tabs-container">
    <el-tabs
        v-model="tabsStore.activeTab"
        type="card"
        @tab-click="handleClick"
        @tab-remove="handleRemove"
    >
      <el-tab-pane
          v-for="tab in tabsStore.tabs"
          :key="tab.path"
          :name="tab.path"
          :closable="tab.path !== '/app/dashboard'"
      >
        <template #label>
          <span :aria-label="tab.title">{{ tab.title }}</span>
        </template>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped>
/* 移除底部长分隔线,针对于type="card"时 */
:deep(.el-tabs--card > .el-tabs__header) {
  border: none !important;
  margin: 0;
}

:deep(.el-tabs--card){
  padding: 5px 10px 10px;
}

/* 移除多余的边框 */
:deep(.el-tabs__nav.is-top) {
  padding: 5px;
  border-left: none;
  border-right: none;
  border-top: none;
}

/* 自定义标签项样式 */
:deep(.el-tabs__item) {
  border: 1px solid var(--tabs-border-color) !important;
  border-radius: 4px;
  margin-right: 5px;
  color: var(--tabs-text);
  background-color: var(--tabs-bg);
  transition: all 0.3s;
  font-size: 12px;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE10+ */
  user-select: none;
  height: 35px;
}

/* 自定义激活标签项样式 */
:deep(.el-tabs__item.is-active) {
  color: var(--tabs-text-active);
  background-color: var(--tabs-active-bg);
  font-weight: bold;
}

:deep(.el-tabs__item:hover) {
  background-color: var(--tabs-hover);
}

/* 自定义关闭按钮样式 */
:deep(.el-tabs__item .is-icon-close) {
  border-radius: 50%;
  transition: all 0.3s;
}

:deep(.el-tabs__item .is-icon-close:hover) {
  background-color: #f56c6c;
  color: white;
}
</style>